<template>
	<view class="page_content">
		<view class="head_content">
			<CustomNavbar :left="0" :title="$t('userCenter.title')"></CustomNavbar>
		</view>
		<view class="main_content">
			<view class="userinfo_box" v-if="userInfoStore" @click="jumpView('/pages/user/info/index')">
				<view class="avatar">
					<image class="image" :src="userInfoStore.avatar" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="nickname">
						<text class="text">{{ userInfoStore.nickname }}</text>
						<image class="image" v-if="userInfoStore.is_vip == 1" src="/static/icons/vip.png" mode="widthFix" @click="openVip"></image>
					</view>
					<view class="msg">
						<text class="text">{{ $t('userCenter.userId', { id: userInfoStore.user_id || '' }) }}</text>
						<text class="copy" @click.stop="copyText(userInfoStore.user_id)">{{ $t('userCenter.copy') }}</text>
					</view>
				</view>
				<image class="arrow" src="/static/icons/arrow.png" mode="widthFix"></image>
			</view>
			<view class="userinfo_box" v-else @click="jumpView('/pages/login/login')">
				<view class="avatar">
					<image class="image" src="/static/images/avatar.png" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="nickname">
						<text class="text">{{ $t('userCenter.notLoggedIn') }}</text>
					</view>
					<view class="msg"></view>
				</view>
			</view>
			<view class="vip_card">
				<view class="vip_box" v-if="iosIsPay">
					<view class="left">
						<view class="line1">{{ $t('userCenter.vipBenefitsTitle') }}</view>
						<view class="line2">{{ $t('userCenter.vipBenefitsSubtitle') }}</view>
					</view>
					<view class="right">
						<u-button :text="$t('userCenter.vipMy')" v-if="userInfoStore.is_vip == 1" :customStyle="buttonStyle" @click="openVip" />
						<u-button :text="$t('userCenter.vipOpen')" v-else :customStyle="buttonStyle" @click="openVip" />
					</view>
				</view>
				<view class="vip_box" v-else>
					<view class="left">
						<view class="line1">{{ $t('userCenter.vipBenefitsTitle') }}</view>
						<view class="line2">{{ $t('userCenter.vipBenefitsSubtitle') }}</view>
					</view>
					<view class="right">
						<u-button :text="$t('userCenter.contactUs')" :customStyle="buttonStyle" @click="openVip" />
					</view>
				</view>
				<view class="integral_box" @click="jumpView('/pages/user/integral/index')">
					<view class="right">
						<text class="text">{{ $t('userCenter.myPoints') }}</text>
						<image class="image" src="/static/icons/integral.png" mode="widthFix"></image>
						<text class="text">{{ userInfoStore.usable || 0 }}</text>
					</view>
					<view class="left">{{ $t('userCenter.recharge') }}</view>
				</view>
			</view>
			
			<view class="card_box">
				<view class="item" v-for="item in cardList" :key="item.id" @click="cardItemClick(item)">
					<view class="icon">
						<image class="image" :src="item.img" mode="aspectFill"></image>
					</view>
					<view class="text">{{ item.text }}</view>
				</view>
			</view>
			<view class="menu_box">
				<view class="item" v-for="item in menuList" :key="item.id" @click="menuItemClick(item.rid, item.text, item.path)">
					<view class="left">
						<view class="icon">
							<image class="image" :src="item.img" :style="{ width: item.width }" mode="widthFix"></image>
						</view>
						<view class="text">{{ item.text }}</view>
					</view>
					<view class="right">
						<u-icon name="arrow-right" color="#fff" size="12" :bold="true"></u-icon>
						<!-- <image class="image" src="/static/icons/arrow.png" mode="widthFix"></image> -->
					</view>
				</view>
			</view>
			<view class="copyright" v-if="copyrightData.length" @click="debugClick">
				<view class="item" v-for="(item, index) in copyrightData" :key="index">
					<image class="image" v-if="item.image" :src="item.image" mode="widthFix"></image>
					<!-- #ifdef MP-WEIXIN -->
					<text class="text">{{ item.name }}</text>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<a v-if="item.url" :href="item.url" target="_blank" rel="">
						<text class="text">{{ item.name }}</text>
					</a>
					<text v-else class="text">{{ item.name }}</text>
					<!-- #endif -->
				</view>
			</view>
			<view class="alert_box" v-if="platform != 'H5' && token && userInfoStore && configStore.system.mobile_switch == 1">
				<view class="item" v-if="!userInfoStore.verification.mobile">
					<text class="text">{{ $t('userCenter.alertBindMobile') }}</text>
					<text class="btn" @click="alertBindButton('mobile')">{{ $t('userCenter.alertGoBind') }}</text>
				</view>
			</view>
			<u-modal :show="cdkey.show" :title="cdkey.title" :showCancelButton="true" @confirm="cdkeyConfirm" @cancel="cdkey.show = false">
				<view style="width: 100%;">
					<u-input v-model="cdkey.value" :customStyle="inputStyle" clearable :placeholder="$t('userCenter.enterCdkey')" @change="inputChange" @blur="inputChange"></u-input>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	
	import { mapState, mapGetters, mapMutations, mapActions } from "vuex"
	export default {
		data() {
			return {
				buttonStyle: {
					width: '100%',
					height: '100%',
					border: 'none',
					fontSize: '26rpx',
					color: '#fff',
					background: 'linear-gradient(135deg, #FFD700 0%, #FFA500 100%)',
					borderRadius: '32rpx',
					fontWeight: 'bold',
					boxShadow: '0 4rpx 12rpx rgba(255, 215, 0, 0.3)'
				},
				cardTemplates: [
					{ id: 1, img: '/static/icons/menu_2.png', textKey: 'userCenter.cards.history', path: '/pages/video/record' },
					{ id: 2, img: '/static/icons/menu_3.png', textKey: 'userCenter.cards.dealer', path: '/pages/user/dealer/index' },
					{ id: 3, img: '/static/icons/menu_4.png', textKey: 'userCenter.cards.share', path: '/pages/user/share/index' },
					{ id: 4, img: '/static/icons/menu_1.png', textKey: 'userCenter.cards.cdkey', path: '' },
				],
				menuTemplates: [
					// #ifndef APP-PLUS
					{ id: 1, img: '/static/icons/list_2.png', width: '32rpx', textKey: 'userCenter.menu.invite', rid: '', path: '/pages/user/share/poster' },
					// #endif
					{ id: 7, img: '/static/icons/list_2.png', width: '28rpx', textKey: 'userCenter.menu.getPoints', rid: '', path: '/pages/user/integral/task' },
					{ id: 2, img: '/static/icons/list_4.png', width: '28rpx', textKey: 'userCenter.menu.userAgreement', rid: '' },
					{ id: 3, img: '/static/icons/list_2.png', width: '28rpx', textKey: 'userCenter.menu.privacyPolicy', rid: '' },
					{ id: 4, img: '/static/icons/list_3.png', width: '28rpx', textKey: 'userCenter.menu.legalNotice', rid: '' },
					{ id: 5, img: '/static/icons/list_5.png', width: '32rpx', textKey: 'userCenter.menu.contact', rid: '' },
					{ id: 6, img: '/static/icons/list_3.png', width: '28rpx', textKey: 'userCenter.menu.about', rid: '' },
				],
				cardList: [],
				menuList: [],
				copyrightData: this.$store.state.app.copyright || [], // 版权说明
				platform: this.$utils.platforms(),
				configStore: this.$store.state.app.config,
				userInfoStore: this.$store.state.user.userInfo,
				debug: {
					count: 0,
					timer: null
				},
				cdkey: {
					show: false,
					title: '',
					value: '',
				},
				inputStyle: {}
			}
		},
		created() {
			this.updateUserCenterTexts()
		},
		computed: {
			...mapGetters("user", ["token", "userInfo"]),
			...mapGetters("app", ["config", "copyright", "richtext", "iosIsPay"]),
			currentLocale() {
				return this.$i18n?.locale || this.$locale.get()
			}
		},
		watch: {
			config: {
				deep: true,
				handler: function(newValue, oldValue) {
					this.configStore = newValue
				}
			},
			userInfo: {
				deep: true,
				handler: function(newValue, oldValue) {
					this.userInfoStore = newValue
				}
			},
			copyright(newValue, oldValue) {
				this.copyrightData = newValue
			},
			richtext(newValue, oldValue) {
				newValue && this.initMenuList(newValue)
			},
			currentLocale() {
				this.updateUserCenterTexts()
			}
		},
		onPullDownRefresh() {
			if(this.token) {
				this.getUserInfo().then(res => {
					uni.stopPullDownRefresh()
				}).catch(err => {
					uni.stopPullDownRefresh()
				})
			} else {
				uni.stopPullDownRefresh()
			}
		},
		onLoad() {
			uni.$on('updateUserInfo', () => {
				this.getUserInfo()
			})

			this.richtext && this.initMenuList(this.richtext)
		},
		onShow() {
			this.token && this.getUserInfo()
		},
		onUnload() {
			uni.$off('updateUserInfo')
		},
		methods: {
			...mapActions('user', ['getUserInfo']),
			buildCardList() {
				return this.cardTemplates.map(item => ({
					...item,
					text: this.$t(item.textKey)
				}))
			},
			buildMenuList() {
				const ridMap = {}
				this.menuList.forEach(item => {
					ridMap[item.id] = item.rid || ''
				})
				return this.menuTemplates.map(item => ({
					...item,
					text: this.$t(item.textKey),
					rid: ridMap[item.id] || item.rid || ''
				}))
			},
			updateUserCenterTexts() {
				this.cardList = this.buildCardList()
				this.menuList = this.buildMenuList()
				this.cdkey.title = this.$t('userCenter.cdkeyTitle')
				if (this.richtext) {
					this.initMenuList(this.richtext)
				}
			},
			// 调试
			debugClick() {
				// #ifdef MP-WEIXIN
				const env = wx.getAccountInfoSync().miniProgram.envVersion
				if(env != "release") {
					clearTimeout(this.debug.timer);
					this.debug.count++;
					this.debug.timer = setTimeout(() => {
						if (this.debug.count >= 5) {
							uni.showModal({
								title: this.$t('userCenter.debugTitle'),
								content: this.$t('userCenter.debugContent', {
									env,
									domain: this.$BASE_URL,
									sign: this.$SIGN
								})
							})
						}
						this.debug.count = 0;
					}, 500);
				}
				// #endif
			},
			alertBindButton(type) {
				if(type == 'wxmp') {
					console.log(this.$t('userCenter.bindWxMini'));
				} else if(type == 'wxoa') {
					console.log(this.$t('userCenter.bindWxOfficial'));
				} else if(type == 'mobile') {
					console.log(this.$t('userCenter.bindMobile'));
					this.jumpView('/pages/user/info/index')
				}
			},
			// 复制
			copyText(info) {
				uni.setClipboardData({
					data: String(info),
					success: () => {
						this.$u.toast(this.$t('userCenter.copySuccess'))
					}
				});
			},
			// 富文本ID
			initMenuList(data) {
				this.menuList = this.menuList.map(item => {
					const next = { ...item }
					switch(next.id) {
						case 2:
							next.rid = data.user_protocol
							break;
						case 3:
							next.rid = data.privacy_protocol
							break;
						case 4:
							next.rid = data.legal_notice
							break;
						case 5:
							next.rid = data.contact_us
							break;
						case 6:
							next.rid = data.about_us
							break;
					}
					return next
				})
			},
			// 菜单列表点击
			menuItemClick(id, title, url) {
				if(url) {
					if(!this.token) return this.$u.toast(this.$t('userCenter.pleaseLogin'))
					this.jumpView(url)
				} else {
					if(!id) return this.$u.toast(this.$t('userCenter.featureDev'))
					const obj = { id, title }
					this.jumpView(`/pages/user/info/richtext?d=${encodeURIComponent(JSON.stringify(obj))}`)
				}
			},
			// 会员中心
			openVip() {
				// #ifdef MP-WEIXIN
				if(!this.iosIsPay) return this.jumpView('/pages/user/info/contact')
				// #endif

				if(!this.token) return this.$u.toast(this.$t('userCenter.pleaseLogin'))
				this.jumpView('/pages/user/member/index')
			},
			// 输入框验证
			inputChange() {
				let result = false
				if(!this.cdkey.value) {
					this.inputStyle = {
						borderColor: 'red !important'
					}
				} else {
					this.inputStyle = {}
					result = true
				}
				return result
			},
			// 卡密兑换
			cdkeyConfirm() {
				if(!this.inputChange()) return
				uni.showLoading({
					title: this.$t('userCenter.exchangeLoading')
				})

				this.$request('user.cdkey', {
					crypto: this.cdkey.value,
					platform: this.$utils.platforms()
				}).then(res => {
					if(res.code === 1) {
						this.getUserInfo()
						this.$u.toast(res.msg)
					}
					this.cdkey.value = ''
					this.cdkey.show = false
					uni.hideLoading()
				}).catch(err => {
					this.$u.toast(this.$t('userCenter.exchangeFailed'))
					this.cdkey.value = ''
					this.cdkey.show = false
					uni.hideLoading()
				})
			},
			// 功能区点击
			cardItemClick(item) {
				if(!item.path) {
					if(item.id === 4) {
						if(!this.token) return this.$u.toast(this.$t('userCenter.pleaseLogin'))
						this.cdkey.show = true
					} else {
						this.$u.toast(this.$t('userCenter.notOpen'))
					}
				} else {
					if(item.id === 2) {
						// #ifdef MP-WEIXIN
						if(!this.iosIsPay) return this.jumpView('/pages/user/info/contact')
						// #endif
					}
					if(!this.token) return this.$u.toast(this.$t('userCenter.pleaseLogin'))
					this.jumpView(item.path)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page_content {
		position: relative;
		
		.main_content {
			padding: 24rpx 40rpx 152rpx 40rpx;
			overflow-y: auto;
			
			.userinfo_box {
				display: flex;
				align-items: center;
				position: relative;
				
				.arrow {
					position: absolute;
					top: 50%;
					right: 0;
					transform: translateY(-50%) rotate(0deg);
					width: 44rpx;
				}
				
				.avatar {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
					border: 2rpx solid #fff;
					overflow: hidden;
					
					.image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				
				.info {
					flex: 1;
					margin-left: 32rpx;
					
					.nickname {
						display: flex;
						
						.text {
							font-size: 34rpx;
							color: #000;
							font-weight: 900;
						}
						
						.image {
							width: 52rpx;
							margin-left: 8rpx;
						}
					}
					
					.msg {
						margin-top: 20rpx;
						font-size: 24rpx;
						
						.text {
							color: #808080;
						}
						
						.copy {
							color: #5E5E5E;
							margin-left: 8rpx;
							text-decoration: underline;
							display: inline-block;
						}
					}
				}
			}
			
			.vip_card {
				border-radius: 24rpx;
				overflow: hidden;
				margin: 40rpx 0;
				box-shadow: 0 8rpx 32rpx rgba(233, 30, 99, 0.15);
				
				.vip_box {
					width: 100%;
					min-height: 160rpx;
					padding: 24rpx 40rpx;
					box-sizing: border-box;
					background: linear-gradient(135deg, #E91E63 0%, #9C27B0 50%, #673AB7 100%);
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: relative;
					overflow: hidden;
					
					&::before {
						content: '';
						position: absolute;
						top: -50%;
						right: -20%;
						width: 300rpx;
						height: 300rpx;
						background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
						border-radius: 50%;
					}
					
					.left {
						flex: 1;
						color: #fff;
						position: relative;
						z-index: 1;
						margin-right: 24rpx;
						min-width: 0;
						
						.line1 {
							font-size: 30rpx;
							font-weight: 700;
							letter-spacing: 0.5rpx;
							text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
							line-height: 1.4;
							word-break: break-word;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						
						.line2 {
							font-size: 24rpx;
							margin-top: 8rpx;
							opacity: 0.95;
							font-weight: 500;
							line-height: 1.4;
							word-break: break-word;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
					
					.right {
						flex-shrink: 0;
						width: 160rpx;
						height: 64rpx;
						position: relative;
						z-index: 1;
					}
				}
				
				.integral_box {
					height: 88rpx;
					background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #fff;
					padding: 0 40rpx;
					font-size: 26rpx;
					font-weight: 700;
					box-shadow: 0 2rpx 8rpx rgba(255, 215, 0, 0.3);
					
					.left {
						color: #fff;
						font-weight: 600;
					}
					
					.right {
						display: flex;
						align-items: center;
						
						.image {
							width: 32rpx;
							margin-right: 8rpx;
							margin-left: 12rpx;
							filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
						}
						
						.text {
							font-weight: 700;
							text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
						}
					}
				}
			}

			.card_box {
				display: flex;
				flex-wrap: wrap;
				border-radius: 24rpx;
				padding: 32rpx 20rpx;
				background: linear-gradient(135deg, #E91E63 0%, #9C27B0 50%, #673AB7 100%);
				box-shadow: 0 8rpx 32rpx rgba(233, 30, 99, 0.2);
				
				.item {
					width: 25%;
					transition: all 0.3s ease;
					
					&:active {
						transform: scale(0.95);
					}
					
					.icon {
						width: 88rpx;
						height: 88rpx;
						margin: 0 auto;
						background: rgba(255, 255, 255, 0.2);
						backdrop-filter: blur(10rpx);
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
						
						.image {
							width: 56rpx;
							height: 56rpx;
							filter: brightness(0) invert(1);
						}
					}
					
					.text {
						font-size: 24rpx;
						color: #fff;
						text-align: center;
						margin-top: 12rpx;
						font-weight: 600;
						text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
					}
				}
			}
		
			.menu_box {
				background: linear-gradient(135deg, #FFFFFF 0%, #F8F4F8 100%);
				border-radius: 24rpx;
				padding: 32rpx 40rpx;
				margin-top: 40rpx;
				box-shadow: 0 4rpx 16rpx rgba(233, 30, 99, 0.1);
				
				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 32rpx 0;
					border-bottom: 1rpx solid rgba(233, 30, 99, 0.1);
					transition: all 0.3s ease;
					
					&:last-child {
						border-bottom: none;
					}
					
					&:active {
						background: rgba(233, 30, 99, 0.05);
						margin: 0 -40rpx;
						padding-left: 40rpx;
						padding-right: 40rpx;
						border-radius: 12rpx;
					}
					
					.left {
						display: flex;
						align-items: center;
						
						.icon {
							width: 40rpx;
							height: 40rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							background: linear-gradient(135deg, #E91E63 0%, #9C27B0 100%);
							border-radius: 50%;
							padding: 8rpx;
							
							.image {
								width: 24rpx;
								height: 24rpx;
								filter: brightness(0) invert(1);
							}
						}
						
						.text {
							font-size: 28rpx;
							color: #1A1A1A;
							margin-left: 32rpx;
							font-weight: 600;
						}
					}
					
					.right {
						.image {
							width: 32rpx;
						}
					}
				}
			}
			
			.copyright {
				margin-top: 60rpx;
				
				.item {
					display: flex;
					align-items: center;
					justify-content: center;
					line-height: 36rpx;
					
					a {
						text-decoration: none;
					}
					
					.image {
						width: 30rpx;
						margin-right: 8rpx;
					}
					
					.text {
						font-size: 24rpx;
						color: rgba(#999, 0.5);
					}
				}
			}
			
			.alert_box {
				width: 100%;
				padding: 0 40rpx;
				position: absolute;
				bottom: 20rpx;
				left: 0;

				.item {
					padding: 20rpx;
					border-radius: 20rpx;
					background: rgba(0, 0, 0, 0.9);
					color: #fff;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.btn {
						background: #C78021;
						padding: 8rpx 20rpx;
						border-radius: 10rpx;
					}
				}
			}
		}
	}
</style>
